<template>
  <el-dialog title="入库" :visible.sync="dialogVisible" width="50%" @close="close">
    <!-- 内容主体 -->
    <el-form
      :model="form"
      ref="formRef"
      :rules="formRules"
      label-width="150px"
    >
      <el-form-item label="入库类型" prop="inboundType_id">
        <el-select v-model="form.inboundType_id" placeholder="请选择入库类型" label-width="100px">
          <el-option
            v-for="item in inboundTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物品类型" prop="bigCate">
        <el-select v-model="form.bigCate" placeholder="请选择物品类型" @change="getSmallCates(form.bigCate)">
          <el-option
            v-for="item in bigCateList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物品二级类型" prop="smallCate">
        <el-select v-model="form.smallCate" placeholder="请选择物品二级类型">
          <el-option
            v-for="item in smallCateList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplier">
        <el-input v-model="form.supplier"></el-input>
      </el-form-item>
      <el-form-item label="生产厂家" prop="oem">
        <el-input v-model="form.oem"></el-input>
      </el-form-item>
      <el-form-item label="采购人" prop="buyer">
        <el-input v-model="form.buyer"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="amount">
        <el-input v-model="form.amount" type="number"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
export default {
  name: "InboundDialog",
  props: ['dialogVisible'],
  created() {
    this.getInboundTypes();
    this.getBigCateTypes();
  },
  data() {
    return {
      form: {
        inboundType_id: '',
        bigCate: '',
        smallCate: '',
        supplier: '',
        oem: '',
        buyer: '',
        amount: 0
      },
      formRef: {},
      formRules: {
        inboundType_id: [
          {required:true,message:'请选择入库类型', trigger: 'blur'}
        ],
        bigCate: [
          {required: true, message: '请选择一类物品', trigger: 'blur'}
        ],
        smallCate: [
          {required: true, message: '请选择二类物品', trigger: 'blur'}
        ],
        supplier: [
          {required: true, message: '请填写供应商', trigger: 'blur'}
        ],
        oem: [
          {required: true, message: '请填写生产厂家', trigger: 'blur'}
        ],
        buyer: [
          {required: true, message: '请填写采购人', trigger: 'blur'}
        ],
        amount: [
          {required:true,message: '数量必须填写', trigger: 'blur'},
          {min: 1, message: '数量必须大于0', trigger: 'blur'}
        ],
      },
      options: [],
      categoryList: [],
      inboundTypeList: [],
      bigCateList: [],
      smallCateList: [],
    }
  },
  methods: {
    async getSmallCates(bigCate) {
      const {data: res} = await this.$http.get('categoryList/' + bigCate)
      if (res.meta.status !== 200) {
        this.smallCateList = [];
        this.form.smallCate = '';
        return this.$message.error('获取物品二级类型信息失败！')
      }
      this.smallCateList = res.data;
    },
    async getInboundTypes() {
      const {data: res} = await this.$http.get('dictionaryList', {
        params: {type_id: 4}
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取入库类型信息失败！')
      }
      this.inboundTypeList = res.data.data;
    },
    async getBigCateTypes() {
      const {data: res} = await this.$http.get('dictionaryList', {
        params: {type_id: 1}
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取物品类型信息失败！')
      }
      this.bigCateList = res.data.data;
    },
    close() {
      this.$refs.formRef.resetFields();
    },
    confirm() {
      // 提交请求前，表单预验证
      this.$refs.formRef.validate(async valid => {
        // 表单预校验失败
        if (!valid) return
        const {data: res} = await this.$http.put(
          'inboundAdd',
          this.form
        )
        if (res.meta.status !== 200) {
          this.$message.error('入库失败！')
        }
        // 隐藏对话框
        this.$message.success('入库成功！')
        this.$parent.getList()
      })
    },
  }
}
</script>

<style scoped>

</style>
